<template>
  <view class="change-info">
    <nav-bar class="nav-bar">
      <text slot="left" class="iconfont icon-fanhui" @click.native="back"></text>
      <view slot="center" class="nav-center">编辑个人资料</view>
    </nav-bar>
    <view class="userAvatar">
      <view class="avatar">
        <image :src="imgSrc" mode="" @click="changeImg"></image>
        <view class="iconfont icon-shumajiadian"></view>
      </view>
      <text>点击更换头像</text>
    </view>
    <view class="info-item" v-for="(item, index) in userInfo" :key="index">
      <view class="item-left">{{ item.title }}</view>
      <view class="item-right">
        <text @click.native="btnClick(index)" class="my-text">{{ item.content }}</text>
        <text class="iconfont icon-youjiantou"></text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: [
        { title: '昵称', content: '蜡笔小新' },
        { title: '抖音号', content: '445133808' },
        { title: '简介', content: '好好学习，天天向上' },
        { title: '学校', content: '家里蹲大学' },
        { title: '性别', content: '男' },
        { title: '生日', content: '1997.12.10' },
        { title: '地区', content: '地球' }
      ],
      imgSrc: '../../static/image/preview.jpg'
    }
  },
  methods: {
    back() {
      uni.switchTab({ url: '/pages/Center/Center' })
    },
    changeImg() {
      let _this = this
      uni.chooseImage({
        count: 1,
        success(res) {
          _this.imgSrc = res.tempFilePaths[0]
        }
      })
    },
    btnClick(index) {
      uni.navigateTo({
        url: `/pages/EditInfo/EditInfo?type=${this.userInfo[index].title}&value=${
          this.userInfo[index].content
        }`
      })
    }
  },
  onLoad(options) {
    this.userInfo.forEach(item => {
      if (uni.getStorageSync(item.title)) {
        item.content = uni.getStorageSync(item.title)
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.change-info {
  height: 100vh;
  background: #171827;
  .userAvatar {
    height: 300rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: gray;
    font-size: 28rpx;
    border-bottom: 1rpx solid gray;
    .avatar {
      position: relative;
      image {
        height: 140rpx;
        width: 140rpx;
        border-radius: 50%;
        border: 6rpx solid #171827;
      }
      .icon-shumajiadian {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 40rpx;
        color: #fff;
      }
    }
  }
  .info-item {
    display: flex;
    justify-content: space-between;
    padding: 0 20rpx;
    height: 100rpx;
    align-items: center;
    font-size: 28rpx;
    .item-left {
      color: #eee;
    }
    .item-right {
      color: gray;
      display: flex;
      .my-text{
        width: 300rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
      }
      .icon-youjiantou {
        margin-left: 10rpx;
      }
    }
  }
}
.nav-bar {
  color: #fff;
}
.icon-fanhui {
  font-size: 40rpx;
}

::v-deep .left {
  width: 80rpx !important;
}
</style>
